<script>
export default {
  name: "FormExamplePAGE",
  data() {
    return {
      data: {
        username: null,
        password: null,
        subject: null,
        gender: null,
        date: null,
      },
      rules: {
        username: [
          {required: true, message:'用户名不能为空', trigger: 'blur'},
        ],
        password: [
          {required: true, message:'密码不能为空', trigger: 'blur'},
          {min: 5, max: 10, message: '长度在5-18个字符之间',trigger: 'blur'}
        ]
      }
    }
  }
}
</script>

<template>
<div>
  <el-card style="width: 600px;margin: 20px auto">
    <div slot="header">
    <span>表单的基础用法</span>
    </div>
    <div>
      <el-form :rules="rules" :model="data">
        <el-form-item label="姓名" prop="username">
          <el-input placeholder="请输入姓名" v-model="data.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" show-password placeholder="请输入密码" v-model="data.password"/>
        </el-form-item>
        <el-form-item label="专业">
          <el-select v-model="data.subject" style="width: 100%">
            <el-option label="软件工程" value="1"/>
            <el-option label="网络工程" value="2"/>
            <el-option label="通信工程" value="3"/>
            <el-option label="网络安全" value="4"/>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="data.gender">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker style="width: 100%"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="data.date"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</div>
</template>

<style scoped>

</style>